<script setup>
import {designRules} from "@/utils/configs.js";

const props = defineProps({
  activeData:{
    type:Object,
    default: () => ({})
  },
})
const attribute = computed(()=>{
  if(!props.activeData.attribute) return {}
  if(Object.keys(props.activeData.attribute).length === 0) return   {}
  return  props.activeData.attribute
})
</script>
<template>
    <div class="flex justify-between items-center mb-10">
      <span>是否需要校验：</span>
      <el-switch  active-value="Y" inactive-value="N"  v-model="activeData.needValid"></el-switch>
    </div>
    <template v-if="activeData.needValid ==='Y'">
      <div class="flex justify-between items-center mb-10">
        <span>校验规则：</span>
        <el-select multiple  size="small" class="w-[120px]"  v-model="activeData.validateArr">
          <el-option v-for="(item,index) in designRules" :key="index" :label="item.label" :value="item.value"></el-option>
        </el-select>
      </div>
    </template>
    <!--单行文本框-->
    <template v-if="activeData.type==='input'">
      <div class="flex justify-between items-center mb-10">
        <span>是否可清除：</span>
        <el-switch  v-model="activeData.attribute.clearable"></el-switch>
      </div>
      <div class="flex justify-between items-center mb-10">
        <span>提示文本：</span>
        <el-input  size="small" class="w-[120px]" v-model="activeData.attribute.placeholder"></el-input>
      </div>
      <div class="flex justify-between items-center mb-10">
        <span>最小长度：</span>
        <el-input-number  size="small" class="w-[120px]" :min="0" v-model="activeData.attribute.minLength"></el-input-number>
      </div>
      <div class="flex justify-between items-center mb-10">
        <span>最大长度：</span>
        <el-input-number  size="small" class="w-[120px]" :min="0" v-model="activeData.attribute.maxLength"></el-input-number>
      </div>
    </template>
    <!--密码输入题-->
    <template v-if="activeData.type==='input-password'">
      <div class="flex justify-between items-center mb-10">
        <span>是否可清除：</span>
        <el-switch  v-model="activeData.attribute.clearable"></el-switch>
      </div>
      <div class="flex justify-between items-center mb-10">
        <span>提示文本：</span>
        <el-input  size="small" class="w-[120px]" v-model="activeData.attribute.placeholder"></el-input>
      </div>
      <div class="flex justify-between items-center mb-10">
        <span>最小长度：</span>
        <el-input-number  size="small" class="w-[120px]" :min="0" v-model="activeData.attribute.minLength"></el-input-number>
      </div>
      <div class="flex justify-between items-center mb-10">
        <span>最大长度：</span>
        <el-input-number  size="small" class="w-[120px]" :min="0" v-model="activeData.attribute.maxLength"></el-input-number>
      </div>
    </template>
    <!--多行文本框-->
    <template v-if="activeData.type==='textarea'">
      <div class="flex justify-between items-center mb-10">
        <span>是否可清除：</span>
        <el-switch  v-model="activeData.attribute.clearable"></el-switch>
      </div>
      <div class="flex justify-between items-center mb-10">
        <span>提示文本：</span>
        <el-input  size="small" class="w-[120px]" v-model="activeData.attribute.placeholder"></el-input>
      </div>
      <div class="flex justify-between items-center mb-10">
        <span>是否显示字数控制：</span>
        <el-switch  v-model="activeData.attribute.showWordLimit"></el-switch>
      </div>
      <div class="flex justify-between items-center mb-10">
        <span>行高设置：</span>
        <el-input-number  size="small" class="w-[120px]" :min="2" v-model="activeData.attribute.rows"></el-input-number>
      </div>
      <div class="flex justify-between items-center mb-10">
        <span>最小长度：</span>
        <el-input-number  size="small" class="w-[120px]" :min="0" v-model="activeData.attribute.minLength"></el-input-number>
      </div>
      <div class="flex justify-between items-center mb-10">
        <span>最大长度：</span>
        <el-input-number  size="small" class="w-[120px]" :min="0" v-model="activeData.attribute.maxLength"></el-input-number>
      </div>
    </template>
    <!--单选组件-->
    <template v-if="activeData.type==='single-check'">
      <div class="flex justify-between items-center mb-10">
        <span>展现形式：</span>
        <el-radio-group v-model="activeData.attribute.showType">
          <el-radio value="radio">单选框</el-radio>
          <el-radio value="select">下拉框</el-radio>
        </el-radio-group>
      </div>
      <div class="flex justify-between items-center mb-10">
        <span>数据源：</span>
        <el-button link size="small" type="primary" @click="activeData.options.push({ label:'',value:'' })">添加</el-button>
      </div>
      <div class="flex justify-between items-center mb-10">
        <el-table size="small" border :data="activeData.options">
          <el-table-column label="文字" align="center">
            <template #default="{row}">
              <el-input size="small" class="w-[80px]" v-model.trim="row.label"></el-input>
            </template>
          </el-table-column>
          <el-table-column label="存值" align="center">
            <template #default="{row}">
              <el-input size="small" class="w-[80px]" v-model.trim="row.value"></el-input>
            </template>
          </el-table-column>
          <el-table-column width="70px" label="操作" align="center">
            <template #default="{row,$index}">
              <el-button size="small"  link type="danger" @click="activeData.options.splice($index,1)" >删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </template>
    <!--多选组件-->
    <template v-if="activeData.type==='multiple-check'">
      <div class="flex justify-between items-center mb-10">
        <span>展现形式：</span>
        <el-radio-group v-model="activeData.attribute.showType">
          <el-radio value="checkbox">勾选框</el-radio>
          <el-radio value="select">下拉框</el-radio>
        </el-radio-group>
      </div>
      <div class="flex justify-between items-center mb-10">
        <span>数据源：</span>
        <el-button link size="small" type="primary" @click="activeData.options.push({ label:'',value:'' })">添加</el-button>
      </div>
      <div class="flex justify-between items-center mb-10">
        <el-table size="small" border :data="activeData.options">
          <el-table-column label="文字" align="center">
            <template #default="{row}">
              <el-input size="small" class="w-[80px]" v-model.trim="row.label"></el-input>
            </template>
          </el-table-column>
          <el-table-column label="存值" align="center">
            <template #default="{row}">
              <el-input size="small" class="w-[80px]" v-model.trim="row.value"></el-input>
            </template>
          </el-table-column>
          <el-table-column width="70px" label="操作" align="center">
            <template #default="{row,$index}">
              <el-button size="small"  link type="danger" @click="activeData.options.splice($index,1)" >删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </template>
    <!--数字组件-->
    <template v-if="activeData.type==='input-number'">
      <div class="flex justify-between items-center mb-10">
        <span>只输入步进值的倍数：</span>
        <el-switch  v-model="activeData.attribute.stepStrictly"></el-switch>
      </div>
      <div class="flex justify-between items-center mb-10">
        <span>步进值：</span>
        <el-input-number  size="small" class="w-[120px]" :min="0" v-model="activeData.attribute.step"></el-input-number>
      </div>
      <div class="flex justify-between items-center mb-10">
        <span>最小值：</span>
        <el-input-number  size="small" class="w-[120px]" :min="0" v-model="activeData.attribute.min"></el-input-number>
      </div>
      <div class="flex justify-between items-center mb-10">
        <span>最大值：</span>
        <el-input-number  size="small" class="w-[120px]" :min="0" v-model="activeData.attribute.max"></el-input-number>
      </div>
      <div class="flex justify-between items-center mb-10">
        <span>精度位数：</span>
        <el-input-number  size="small" class="w-[120px]" :min="0" :max="5" v-model="activeData.attribute.precision"></el-input-number>
      </div>
    </template>
    <!--评分组件-->
    <template v-if="activeData.type==='rate'">
      <div class="flex justify-between items-center mb-10">
        <span>是否显示当前分数：</span>
        <el-switch  v-model="activeData.attribute.showScore"></el-switch>
      </div>
      <div class="flex justify-between items-center mb-10">
        <span>是否允许半选：</span>
        <el-switch  v-model="activeData.attribute.allowHalf"></el-switch>
      </div>
      <div class="flex justify-between items-center mb-10">
        <span>步进值：</span>
        <el-input-number  size="small" class="w-[120px]" :min="0" v-model="activeData.attribute.step"></el-input-number>
      </div>
      <div class="flex justify-between items-center mb-10">
        <span>最大分值：</span>
        <el-input-number  size="small" class="w-[120px]" :min="0" v-model="activeData.attribute.max"></el-input-number>
      </div>
    </template>
    <!--滑块组件-->
    <template v-if="activeData.type==='slider'">
      <div class="flex justify-between items-center mb-10">
        <span>显示输入框：</span>
        <el-switch  v-model="activeData.attribute.showInput"></el-switch>
      </div>
      <div class="flex justify-between items-center mb-10">
        <span>步进值：</span>
        <el-input-number  size="small" class="w-[120px]" :min="0" v-model="activeData.attribute.step"></el-input-number>
      </div>
      <div class="flex justify-between items-center mb-10">
        <span>最小值：</span>
        <el-input-number  size="small" class="w-[120px]" :min="0" v-model="activeData.attribute.min"></el-input-number>
      </div>
      <div class="flex justify-between items-center mb-10">
        <span>最大值：</span>
        <el-input-number  size="small" class="w-[120px]" :min="0" v-model="activeData.attribute.max"></el-input-number>
      </div>
    </template>
    <!--日期组件-->
    <template v-if="activeData.type==='date'">
      <div class="flex justify-between items-center mb-10">
        <span>是否可清除：</span>
        <el-switch  v-model="activeData.attribute.clearable"></el-switch>
      </div>
      <div class="flex justify-between items-center mb-10">
        <span>提示文本：</span>
        <el-input  size="small" class="w-[120px]" v-model="activeData.attribute.placeholder"></el-input>
      </div>
    </template>
    <!--日期时间组件-->
    <template v-if="activeData.type==='datetime'">
      <div class="flex justify-between items-center mb-10">
        <span>是否可清除：</span>
        <el-switch  v-model="activeData.attribute.clearable"></el-switch>
      </div>
      <div class="flex justify-between items-center mb-10">
        <span>提示文本：</span>
        <el-input  size="small" class="w-[120px]" v-model="activeData.attribute.placeholder"></el-input>
      </div>
    </template>
    <!--文件上传组件-->
    <template v-if="activeData.type==='file-upload'">
      <div class="flex justify-between items-center mb-10">
        <span>上传最大个数：</span>
        <el-input-number  size="small" class="w-[120px]" :min="1" v-model="activeData.attribute.limit"></el-input-number>
      </div>
      <div class="flex justify-between items-center mb-10">
        <span>单个文件最大：</span>
        <el-input-number :min="1"   size="small" class="w-[120px]" v-model="activeData.attribute.fileSize">
          <template #suffix>
            <span>MB</span>
          </template>
        </el-input-number>
      </div>
      <div class="flex justify-between items-center mb-10">
        <span>文件允许格式：</span>
        <el-select  multiple   size="small" class="w-[120px]" v-model="activeData.attribute.fileType">
          <el-option label="doc" value="doc"></el-option>
          <el-option label="docx" value="xlsx"></el-option>
          <el-option label="ppt" value="ppt"></el-option>
          <el-option label="text" value="text"></el-option>
          <el-option label="xlsx" value="xlsx"></el-option>
        </el-select>
      </div>
      <div class="flex justify-between items-center mb-10">
        <span>显示提示：</span>
        <el-switch  v-model="activeData.attribute.isShowTip"></el-switch>
      </div>
    </template>
    <template v-if="activeData.type==='image-upload'">
      <div class="flex justify-between items-center mb-10">
        <span>控件宽度：</span>
        <el-input-number  size="small" class="w-[120px]" :min="30" v-model="activeData.attribute.size"></el-input-number>
      </div>
      <div class="flex justify-between items-center mb-10">
        <span>上传最大个数：</span>
        <el-input-number  size="small" class="w-[120px]" :min="1" v-model="activeData.attribute.limit"></el-input-number>
      </div>
      <div class="flex justify-between items-center mb-10">
        <span>单个文件最大：</span>
        <el-input-number :min="1"   size="small" class="w-[120px]" v-model="activeData.attribute.fileSize">
          <template #suffix>
            <span>MB</span>
          </template>
        </el-input-number>
      </div>
      <div class="flex justify-between items-center mb-10">
        <span>文件允许格式：</span>
        <el-select  multiple   size="small" class="w-[120px]" v-model="activeData.attribute.fileType">
          <el-option label="png" value="png"></el-option>
          <el-option label="jpg" value="jpg"></el-option>
          <el-option label="jpeg" value="jpeg"></el-option>
          <el-option label="gif" value="gif"></el-option>
        </el-select>
      </div>
      <div class="flex justify-between items-center mb-10">
        <span>显示提示：</span>
        <el-switch  v-model="activeData.attribute.isShowTip"></el-switch>
      </div>
    </template>


</template>

<style scoped lang="scss">

</style>
